<template>
  <div ref="renderScaleRef" class="render-scale-com">
    <div
      ref="scrollContainerRef"
      class="com-scroll-container"
      :style="{ width: (1 / scaleRate) * 100 + '%' }"
      @wheel.stop.prevent
    >
      <canvas id="scale-canvas" ref="canvasRef" class="com-item"></canvas>
    </div>
  </div>
</template>

<script>
import { calcLineCount, calcViewDuration } from '../js/common';
import { TIMELINE_CONFIG } from '@veditor/components/timeLine/js/enums';
import { scaleCanvas } from '@veditor/components/timeLine/js/workerOptimize';
import { debounce } from 'lodash';

export default {
  name: 'RenderScale',
  props: {
    videoDuration: {
      required: true,
      type: Number,
    },
  },
  data() {
    return {
      // 竖线的次数
      times: 0,
      // 时间刻度
      timeScale: [],
      //默认的比例
      scaleRate: TIMELINE_CONFIG.defaultScaleRate,
      copyScaleRate: TIMELINE_CONFIG.defaultScaleRate,
    };
  },
  mounted() {
    const DELAY = 60;
    this.calcPosition = debounce(this.calcPosition.bind(this), DELAY);
  },
  methods: {
    async calcPosition() {
      const { videoDuration, copyScaleRate } = this;
      const renderScale = this.$refs.renderScaleRef;
      const { width: viewWidth, height } = renderScale.getBoundingClientRect();
      const width = Math.round((1 / copyScaleRate) * viewWidth);
      const { canvasRef } = this.$refs;
      const ctx = canvasRef.getContext('2d');
      if (width && height) {
        const viewDuration = calcViewDuration(videoDuration);
        const { times, timeScale, marginRight } = calcLineCount(width, viewDuration || 60);
        Object.assign(this, { times, timeScale });
        const imageBitMap = await this.renderCanvasWorker(
          width,
          height,
          times,
          timeScale,
          marginRight,
        );
        requestAnimationFrame(() => {
          this.scaleRate = copyScaleRate;
          Object.assign(canvasRef, { width, height }); // 这里再修改宽度,防止宽度变化导致画布空白
          ctx.clearRect(0, 0, width, height);
          ctx.drawImage(imageBitMap, 0, 0, width, height);
        });
      }
    },
    // 处理缩放比例变化
    scaleRateChange(scaleRate) {
      this.copyScaleRate = scaleRate;
    },
    // 时间轴滚动同步
    scrollSync(scrollLeft) {
      this.$refs.renderScaleRef.scrollLeft = scrollLeft;
    },
    // 用于绘制canvas
    renderCanvasWorker(width, height, times, timeScale, marginRight) {
      return new Promise(resolve => {
        const renderCanvas = new Worker(scaleCanvas);
        renderCanvas.postMessage({
          width,
          height,
          times,
          timeScale,
          marginRight,
        });
        renderCanvas.onmessage = e => {
          resolve(e.data);
          renderCanvas.terminate();
        };
        renderCanvas.onerror = e => {
          console.log(`web worker绘制canvas报错${e}`);
          renderCanvas.terminate();
        };
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.render-scale-com
  margin 0 12px 0 168px
  overflow-x scroll
  overflow-y hidden
  &::-webkit-scrollbar-thumb
    background-color transparent
  &::-webkit-scrollbar-track
    background-color #282828
  &::-webkit-scrollbar
    height 0
  .com-scroll-container
    width 100%
    display flex
    height 22px
    .com-item
      width 100%
</style>
